{% extends 'base.html' %}
{% block title %}
    文章详情
{% endblock %}
{% block scrtpt %}
    {{ super() }}
    <script src="/static/js/tinymce/jquery.tinymce.min.js"></script>
    <script src="/static/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: '#commentTextarea',
            language: 'zh_CN',
            width: 770,
            height: 300,
            toolbar: [
                'undo redo | outdent  indent | fontselect | fontsizeselect | styleselect',
                'lineheight | bold italic underline strikethrough underline | alignleft aligncenter alignright'
            ]
        });
    </script>
{% endblock %}
{% block style %}
    <style>
        #comment {
            border-top: 1px solid #000
        }
    </style>
{% endblock %}
{% block content %}
    <div id="detail" class="col-md-5 col-md-offset-3">
        <h1>{{ article[2] }}</h1>
        <p>{{ article[9] }}</p>
        <p>{{ article[5] | safe }}</p>
        <p>{{ article[6] }}</p>
        {% if favFlag %}
            <span class="glyphicon glyphicon-heart" style="color:#F00;"></span><span>{{ article[4] }}</span>
        {% else %}
            <span class="glyphicon glyphicon-heart"></span><span>{{ article[4] }}</span>
        {% endif %}
    </div>
    <div id="commentTextareaBox" class="col-md-5 col-md-offset-3">
        <form action="{{ url_for('article.addComment') }}" method="post">
            <label for="content">留下你的评论吧...</label>
            <textarea name="commentTextarea" id="commentTextarea"></textarea>
            {#隐藏的articleId#}
            <input type="hidden" value="{{ article[0] }}" name="articleId">
            <button type="submit" class="btn btn-default">发表评论</button>
        </form>
    </div>
    {% if comments %}
        {% for comment in comments %}
            <div id="comment" class="col-md-5 col-md-offset-3">
                <p>{{ comment[3] | safe }}</p>
                <p>{{ comment[6] }}&nbsp;&nbsp;发表于:{{ comment[4] }}</p>
            </div>
        {% endfor %}
    {% else %}
        <div id="comment" class="col-md-5 col-md-offset-3">
            <h2>还没有人来评论哦，赶快来抢个沙发吧...</h2>
        </div>
    {% endif %}
{% endblock %}
{% block myjs %}
    {% if favFlag %}
        <script>
            $(function () {
                //收藏点击事件
                let if_save = 1
                $('.glyphicon-heart').click(function () {
                    if_save += 1
                    if (if_save % 2 === 1) {
                        $.get('{{ url_for('article.articleFav') }}', {
                            articleId:{{article[0]}},
                            userId:{{user[0]}}
                        }, function (data) {
                            $('.glyphicon-heart').next('span').text(data.fav_num);
                            $('.glyphicon-heart').css({'color': 'red'});
                        });

                    } else {
                        $.get('{{ url_for('article.articleDeFav') }}', {
                            articleId:{{article[0]}},
                            userId:{{user[0]}}
                        }, function (data) {
                            $('.glyphicon-heart').next('span').text(data.fav_num);
                            $('.glyphicon-heart').css({'color': 'black'});
                        });

                    }

                });
            });
        </script>
    {% else %}
        <script>
            $(function () {
                //收藏点击事件
                let if_save = 0
                $('.glyphicon-heart').click(function () {
                    if_save += 1
                    if (if_save % 2 === 1) {
                        $.get('{{ url_for('article.articleFav') }}', {
                            articleId:{{article[0]}},
                            userId:{{user[0]}}
                        }, function (data) {
                            $('.glyphicon-heart').next('span').text(data.fav_num);
                            $('.glyphicon-heart').css({'color': 'red'});
                        });

                    } else {
                        $.get('{{ url_for('article.articleDeFav') }}', {
                            articleId:{{article[0]}},
                            userId:{{user[0]}}
                        }, function (data) {
                            $('.glyphicon-heart').next('span').text(data.fav_num);
                            $('.glyphicon-heart').css({'color': 'black'});
                        });

                    }

                });
            });
        </script>
    {% endif %}

{% endblock %}